<template>
	<div class="bottom-icon">
		<ul class="bottom-ul">
			<router-link :to="'/home/'+this.$store.state.username" class="bottom-li" tag="li" replace>
				<span class="active iconfont">&#xe745;</span>
				<p class="bottom-word">消息</p>
			</router-link>
			<router-link to="/contacts" class="bottom-li" tag="li" replace>
				<span class=" iconfont">&#xe61c;</span>
				<p class="bottom-word">联系人</p>
			</router-link>
			<router-link to="/kandian" class="bottom-li" tag="li" >
				<span class="icon iconfont">&#xe61a;</span>
				<p class="bottom-word">看点</p>
			</router-link>
			<router-link to="/dongtai" class="bottom-li" tag="li">
				<span class="icon iconfont">&#xe69d;</span>
				<p class="bottom-word">动态</p>
			</router-link>
		</ul>
	</div>
</template>

<style lang="stylus" scoped>
	.bottom-icon
		position:fixed
		bottom:0
		height:1.2rem
		background:#fbfbfb
		width:100%
		.bottom-ul
			.bottom-li 
				float:left
				width:25%
				text-align: center;
				padding-top: 6px;
				color:#b0b2bf
				.iconfont
					font-size:31px
				.bottom-word
					margin-top: 3px;
					font-size: 12px;
					color: #ccc;
			.router-link-active
				color:#27bfff
</style>